<template>
  <div class="card-content relative">
    <div class="chart-content w-p-100 h-p-100" :id="idName"></div>
    <div class="card-title absolute fz-20 text-bold">
      <text class="mr-20">56784.00</text>
      <UP></UP>
      <text class="fz-12">15%</text>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import UP from "../icons/up.vue";
const porp = defineProps({
  idName: {
    Type: String,
    default: () => "chart" + Math.floor(Math.random() * 100000000),
  },
});
onMounted(() => {
  const myChart = echarts.init(document.getElementById(porp.idName));
  const option = {
    backgroundColor: "#031d33",
    grid: {
      top: 0,
      bottom: 0,
      left: "5%",
      right: "15%",
    },
    xAxis: {
      show: false,
      type: "value",
      boundaryGap: [0, 0],
    },
    yAxis: [
      {
        type: "category",
        data: [""],
        axisLine: { show: false },
        axisTick: [
          {
            show: false,
          },
        ]
      },
    ],
    series: [
      {
        name: "金额",
        type: "bar",
        zlevel: 1,
        label: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
          position: ["2%", "30"],
          // align :'right',
          formatter: "数据可视化分析",
        },
        itemStyle: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(48, 236, 166, 1)",
            },
            {
              offset: 0,
              color: "rgba(48, 236, 166, 0.5)",
            },
          ]),
        },
        barWidth: 10,
        data: [10],
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-100%",
        data: [20],
        label: {
                show: true,
                position: 'right',
                color: '#00DEFF',
                fontSize: 12,
                fontWeight:'bold',
                formatter: function(param) {
                    return 50 + '%';
                },
        },
        itemStyle: {
          color: "rgba(28, 128, 213, 0.19)",
          barBorderRadius: 30,
        },
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style  scoped>
.card-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #00adff;
  border-left:4px solid #3d9dc9;
  border-right:4px solid #3d9dc9;
}
.card-title {
  color: #00deff;
  top: 15%;
  left: 5%;
}
</style>